<template>
  <div class="bankCardInfo">
    <van-nav-bar
        :title="$t('loan_info_confirmation')"
        left-arrow
        @click-left="$router.push($route.query.backName)"
    />
    <div style="padding: 10px">
      <div class="content_list">
        <!--        收款银行-->
        <div class="card_item">
          <div class="card_box" @click="$router.push('/myCard')">
            <div class="card_header">
              <div class="title">{{ cardInfo.bankcardName }}</div>
              <div class="is_default">
                {{ $t('replace') }}
              </div>
            </div>
            <div class="card_content">
              {{ cardInfo.bankcard }}
            </div>
          </div>
        </div>
      </div>

      <div class="content_list" style="background-color: #ffffff;padding: 0 10px">
        <!--        借款金额-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/icon_loan_money.png">
            <span class="text">{{ $t('loan_amount') }}</span>
          </div>
          <div class="select_right">
            <span class="money_symbol">₫</span>{{ formatterMoney(loanInfo.loanAmount) }}
          </div>
        </div>
        <!--        借款周期-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/icon_jiekuanzhouqi.png">
            <span class="text">{{ $t('loan_term') }}</span>
          </div>
          <div class="select_right">
            {{ loanInfo.loanTerm }}{{ $t('day') }}
          </div>
        </div>
        <!--        利息费用-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/ic_lixifeiyong.png">
            <span class="text">{{ $t('rateFee_detail') }}</span>
          </div>
          <div class="select_right">
            <span class="money_symbol">₫</span>{{ formatterMoney(loanInfo.interestFee) }}
          </div>
        </div>
        <!--        服务费用-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/icon_haikuan.png">
            <span class="text">{{ $t('service_cost') }}</span>
          </div>
          <div class="select_right">
            <span class="money_symbol">₫</span><sapn>{{ formatterMoney(loanInfo.serviceFee) }}</sapn>
          </div>
        </div>
        <!--        到账金额-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/icon_arrival_account.png">
            <span class="text">{{ $t('amount_received') }}</span>
          </div>
          <div class="select_right">
            <span class="money_symbol">₫</span> <sapn>{{ formatterMoney(loanInfo.receivedAmount) }}</sapn>
          </div>
        </div>
        <!--        到期应还-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/icon_repayment.png">
            <span class="text">{{ $t('expire_repayment') }}</span>
          </div>
          <div class="select_right">
            <span class="money_symbol">₫</span>{{ formatterMoney(loanInfo.refundAmount) }}
          </div>
        </div>
        <!--        到期时间-->
        <div class="content_item">
          <div>
            <img class="image" src="../../assets/icon_expire_time.png">
            <span class="text">{{ $t('expire_time') }}</span>
          </div>
          <div class="select_right">
            {{ loanInfo.expireDate }}
          </div>
        </div>
      </div>
      <div style=" text-align: center;">
        <van-button class="confirm" type="primary" :loading="confirmLoading" @click="confirm">{{
            $t('confirm')
          }}
        </van-button>
      </div>

    </div>
  </div>
</template>

<script>
import {fetchMyCard, loanConfirm, applyConfirm, uploadDeviceInfo} from '@/api/home'
import {ref} from "vue";
import router from "@/router";
import {Toast} from 'vant'
import {useI18n} from 'vue-i18n'
import {debounce, formatMoney} from '@/utils/tool'
import {useRoute} from "vue-router";
import {useStore} from "vuex";
import MobileDetect from 'mobile-detect'

export default {
  setup() {
    const cardInfo = ref({})
    const loanInfo = ref({})
    const confirmLoading = ref(false)
    const store = useStore()
    const {tm} = useI18n()
    // 获取银行卡信息
    const fetchCardInfo = async () => {
      const res = await fetchMyCard()
      if (res.code === 1) {
        const card = res.data.filter(item => item.isSelected === 1)
        if (card.length) {
          cardInfo.value = card[0]
        }
      }
    }
    // 获取贷款详情
    const fetchLoanDetails = async () => {
      const info = JSON.parse(localStorage.getItem('loanInfo'))
      const res = await loanConfirm({
        loanTerm: info.loanTerm, loanAmount: info.loanAmount, productName: info.productName
      })
      const {interestFee, receivedAmount, loanAmount, refundAmount} = res.data
      loanInfo.value = res.data
      // 清除loading
      store.dispatch('changeLoading', false)
    }

    // 申请确认
    const confirm = async () => {
      const {loanTerm, loanAmount, productName} = JSON.parse(localStorage.getItem('loanInfo'))
      confirmLoading.value = true
      const res = await applyConfirm({
        loanTerm, loanAmount, productName
      })
      if (res.code === 1) {
        confirmLoading.value = false
        Toast({
          message: tm('submit_success')
        })
        localStorage.setItem('orderId', res.data)
        let data = JSON.parse(localStorage.getItem('userInfoVerify'))
        const {
          ongoingOrder,
          pendingRepayment,
        } = data
        if (ongoingOrder || pendingRepayment) {
          Toast({
            message: tm('hint_apply_later')
          })
          return
        }
        router.push('/loanSuccess')
      } else {
        confirmLoading.value = false
      }
    }

    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value, 0, "", '.')
      } else {
        return value
      }
    }
    fetchCardInfo()
    fetchLoanDetails()
    return {
      cardInfo,
      loanInfo,
      confirm,
      confirmLoading,
      formatterMoney
    }
  }
}
</script>

<style lang="less" scoped>
.bankCardInfo {
  background-color: #f2f3f5;
  overflow: auto;

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  ::v-deep .van-switch {
    height: 26px !important;

    .van-switch__node {
      height: 26px !important;
    }

  }

  .content_list {
    border-radius: 5px;
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;

    .card_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      .card_box {
        height: 150px;
        width: 100%;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px 15px;
        position: relative;
        background: #FF6A4E;

        .card_header {
          display: flex;
          color: #ffffff;

          .title {
            font-size: 10px;
            width: 200px;
            margin-right: 10px;
          }

          .is_default {
            font-size: 10px;
            text-align: right;
            flex: 1;
          }
        }

        .card_content {
          font-size: 18px;
          position: absolute;
          bottom: 20px;
          color: #ffffff;
        }
      }
    }

    .content_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: solid 1px #f2f3f5;
      padding: 10px 0;

      div {
        height: 100%;
        display: flex;
        align-items: center;

        .image {
          height: 25px;
          width: 25px;
          margin-right: 10px;
        }

        .text {
          font-size: 14px;
          font-weight: 600;
        }
      }

      .select_right {
        color: #9D9D9D;
        font-size: 14px;
        margin-left: 5px;
        flex: 1;
        justify-content: flex-end;
      }

      .select_right_text {
        color: #9D9D9D;
        font-size: 14px;
        margin-right: 5px;
      }
    }
  }

  .confirm {
    margin-top: 20px;
    margin-bottom: 10px;
    width: 70%;
    padding: 10px 0;
    color: #ffffff;
    border: none;
    font-size: 16px;
    background: linear-gradient(-45deg, #FF5252, #FF8C3C);
    box-shadow: 0px 4px 10px 0px rgba(255, 92, 78, 0.52);
    border-radius: 29px;

  }
}
</style>
